<template>
  <div class="category-tabs">
    <div class="tabs-container">
      <div 
        v-for="category in categories" 
        :key="category"
        class="tab-item"
        :class="{ active: category === activeCategory }"
        @click="handleTabClick(category)"
      >
        {{ category }}
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  categories: {
    type: Array,
    required: true
  },
  activeCategory: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['switch-category'])

const handleTabClick = (category) => {
  emit('switch-category', category)
}
</script>

<style scoped>
.category-tabs {
  margin-bottom: 20px;
  background: transparent;
  padding: 16px 30px 16px 20px;
  width: 100%;
}

.tabs-container {
  display: flex;
  gap: 24px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.tab-item {
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  transition: all 0.2s;
  background: transparent;
  border-bottom: 2px solid transparent;
}

.tab-item:hover {
  color: #333;
}

.tab-item.active {
  color: #ff2442;
  border-bottom-color: #ff2442;
}

.tab-item.active:hover {
  color: #ff2442;
}
</style>

